<template>
  <VueEchart :option="options" style="width: 100%;height: 13px" />
</template>
<!--圆柱条+渐变 进度条-->
<script>
import VueEchart from "./VueEchart";
export default {
  name: "PictorialProgress",
  components: {
    VueEchart
  },
  props: {
    value: {
      type: Number,
      default: 50
    },
    total: {
      type: Number,
      default: 100
    }
  },
  data() {
    return {};
  },
  computed: {
    options() {
      const currentVal = this.value;
      const total = this.total;
      return {
        grid: {
          top: "0%",
          bottom: "0%",
          right: "0%",
          left: "0%"
        },
        xAxis: { show: false },
        yAxis: [
          {
            triggerEvent: true,
            show: true,
            inverse: true,
            data: ["当前值"],
            axisLine: { show: false },
            splitLine: { show: false },
            axisTick: { show: false },
            axisLabel: {
              show: false
            }
          }
        ],
        series: [
          {
            type: "pictorialBar",
            symbol:
              "image://",
            symbolSize: [26, 26],
            symbolOffset: [13, 0],
            z: 12,
            itemStyle: { normal: { color: "#00FFE6" } },
            data: [{ value: currentVal, symbolPosition: "end" }]
          },
          {
            type: "bar",
            showBackground: true,
            backgroundStyle: {
              color: {
                colorStops: [
                  { offset: 0, color: "rgba(2,161,255,0.00)" },
                  { offset: 1, color: "#0079B2" }
                ],
                x: 0,
                y: 0,
                x2: 1,
                y2: 0,
                type: "linear",
                global: true
              },
              borderRadius: 3,
              shadowBlur: 3
            },
            yAxisIndex: 0,
            data: [
              {
                name: "当前值",
                value: currentVal
              },
              {
                name: "总数",
                value: total,
                itemStyle: {
                  opacity: 0
                }
              }
            ],
            barWidth: 5,
            itemStyle: {
              normal: {
                color: {
                  colorStops: [
                    { offset: 0, color: "rgba(2,161,255,0.00)" },
                    { offset: 1, color: "#01FFF2" }
                  ],
                  x: 0,
                  y: 0,
                  x2: 1,
                  y2: 0,
                  type: "linear",
                  global: false
                },
                borderRadius: 16
              },
              borderRadius: 3
              // ,
              // shadowBlur: 3
            }
          }
        ]
      };
    }
  },
  watch: {},
  created() {},
  mounted() {},
  beforeDestroy() {},
  methods: {}
};
</script>
<style lang="scss" scoped></style>
